<!-- 秒杀模块 -->
<template>
<div class='seckill-nav'>
    <div class="seckill-header">
        <div class="seckill-header-img">
            <img src="@/assets/images/seckill.png" alt="">
        </div>
        <div class="seckill-header-text">
            <p>据放学还剩：</p>
            <div>
                <span >{{hour}}</span>
                <b>:</b>
                <span >{{min}}</span>
                <b>:</b>
                 <span >{{second}}</span>
            </div>
        </div>
    </div>
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
//import引入的组件需要注入到components对象中才能使用
components: {},
data() {
//这里存放数据
return {
    hour:"",
    min:"",
    second:""
    

};
},
methods: {
      countDown:function() {
                var nowtime = new Date();
                var endtime = new Date("2021/3/25,22:30:00");
                var lefttime = parseInt((endtime.getTime() - nowtime.getTime()) / 1000);
               this.hour = parseInt(lefttime / (60 * 60) )<10?"0"+parseInt(lefttime / (60 * 60) ): parseInt(lefttime / (60 * 60))+""
                this.min = parseInt(lefttime / 60 % 60)<10?"0"+parseInt(lefttime / 60 % 60): parseInt(lefttime / 60 % 60)+""
               this.second= parseInt(lefttime % 60)<10?"0"+parseInt(lefttime % 60): parseInt(lefttime % 60)+""  
                 setTimeout(this.countDown, 1000);
                 if(lefttime<=0){
                     this.hour="放"
                     this.min="学"
                     this.second="了"
                 }
            }
},
  created() {
    this.countDown()
  }

}
</script>
<style lang="less">
.seckill-nav{
    margin: 1rem 1rem 0;
    background-color: #fff;
    border-radius: 1rem;
    .seckill-header{
        display: flex;
        justify-content: space-between;
        padding: 2.2rem 1rem 1.2rem 1.5rem;
        .seckill-header-img{
            width: 10rem;
            img{
                width: 10rem;
            }
        }
        .seckill-header-text{
            display: flex;
                justify-content: flex-start;
                align-items: center;
                p{
                    font-size: 1.6rem;
                }
                b{
                    color: #f20d23;
                    font-size: 1.6rem;
                    margin: 0.4rem;
                }
                span{
                    display: inline-block;
                    width: 2.4rem;
                  height: 2rem;
                  line-height: 2rem;
                    color: #fff;
                    background: linear-gradient(-88deg,#ff4f2e,#f91f28);
                    font-size: 1.2rem;
                    border-radius: 0.5rem;
                    text-align: center;
                }
        }
    }
}

</style>